<template>
  <view class="collapse-item">
    <view class="collapse-head">
      <view class="collapse-head-left" @click="headClick">
        <view class="icon u-flex u-row-center" v-if="item.level == 1">
          <u-icon color="#ffffff" size="24" :name="isShow ? 'minus' : 'plus'"></u-icon>
        </view>
      </view>
      <view class="collapse-head-center">
        <view class="u-flex">
          <view class="bag" v-if="item.level == 1">
            <u-image
              width="72"
              height="32"
              v-if="item.has_bought == 1"
              src="@/static/images/yigouamai.png"
            ></u-image>
            <u-image
              width="72"
              height="32"
              v-if="item.user_price == 0"
              src="@/pageFound/static/images/free.png"
            >
            </u-image>
          </view>
          <view
            class="title u-line-1"
            :class="{ 'big-title': item.level == 1 }"
            @click="clickCollapseItem(item)"
          >
            {{ item.title }}
          </view>
        </view>
        <view class="progress">
          <u-line-progress
            :show-percent="false"
            height="8"
            :active-color="globPrimaryColor"
            :percent="handlePercentage(item.answered_num, item.topic_count)"
          ></u-line-progress>
          <view class="text"> {{ item.answered_num }}/{{ item.topic_count }} </view>
          <view class="text">正确率：{{ item.accuracy }}%</view>
        </view>
      </view>
      <view
        class="collapse-head-right u-flex u-row-right"
        v-if="data.has_bought == 1 || data.user_price == 0"
        @click="clickCollapseItem(item)"
      >
        <u-icon color="#B7BAC1" size="28" name="arrow-right"></u-icon>
      </view>
      <view
        class="collapse-head-right u-flex u-row-right"
        v-if="item.has_bought == 0 && item.user_price > 0 && item.level"
      >
        <edu-button type="primary" size="medium" shape="circle" @click="onBuy(item.id)"
          >{{ item.user_price | formatCurrency(null, 0) }} | 购买</edu-button
        >
      </view>
    </view>
    <view class="collapse-body" v-if="isShow">
      <special-collapse-item
        v-for="child in item.child"
        :key="child.id"
        :item="child"
        :data="data"
      ></special-collapse-item>
    </view>
    <u-modal
      show-cancel-button
      v-model="show"
      :z-index="20100"
      :show-title="false"
      cancel-text="重新开始"
      confirm-text="继续答题"
      :confirm-color="globPrimaryColor"
      :confirm-style="{ 'border-left': '1px solid #e4e7ed' }"
      @cancel="onCancel"
      @confirm="onConfirm"
    >
      <view class="u-text-center u-font-32 u-main-color u-padding-top-70 u-padding-bottom-60"
        >是否继续上次作答？</view
      >
    </u-modal>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import specialCollapseItem from './special-collapse-item.vue'
export default {
  name: 'special-collapse-item',
  props: {
    // 当前数据
    item: {
      type: Object,
      default() {
        return {}
      },
    },
    // 首层数据
    data: {
      type: Object,
      default: function () {
        return {}
      },
    },
    // 板块id
    moduleId: {
      type: [Number, String],
      default: 0,
    },
  },
  components: {
    specialCollapseItem,
  },
  data() {
    return {
      isShow: false,
      show: false,
      queryItem: {},
    }
  },
  computed: {
    ...mapGetters({
      globPrimaryColor: 'designSetting/getGlobThemeColor',
    }),
  },
  options: { styleIsolation: 'shared' },
  methods: {
    // 点击collapsehead头部
    headClick() {
      this.isShow = !this.isShow
      // 触发本组件的事件
      this.$emit('change')
    },
    // 购买
    onBuy(id) {
      this.$edu.judgeLogin(() => {
        this.$u.route('pageFound/exam/pay', {
          id: id,
          moduleId: this.moduleId,
          key: 'special',
        })
      })
    },
    // item
    clickCollapseItem(item) {
      console.log(item.level == 2 ? this.data.id : 0)
      this.$edu.judgeLogin(() => {
        // 已购买的
        if (this.data.has_bought == 1 || this.data.user_price == 0) {
          // 已作答试题数
          if (item.answered_num === 0) {
            this.$u.route('/pageFound/exam/special/topic', {
              id: item.id,
              pid: item.pid,
            })
          } else {
            this.show = true
            this.queryItem = {
              id: item.id,
              pid: item.pid,
              topic_id: item.last_practice,
            }
          }
        }
      })
    },
    // 确认
    onConfirm() {
      this.$u.route('/pageFound/exam/special/topic', this.queryItem)
    },
    // 取消
    onCancel() {
      this.$edu.api
        .getClearSpecial({
          special_id: this.queryItem.id,
        })
        .then((res) => {
          this.$u.route('/pageFound/exam/special/topic', {
            id: this.queryItem.id,
            pid: this.queryItem.pid,
          })
        })
    },
    handlePercentage(num, count) {
      if (count <= 0) return 0
      let number = Math.floor((num / count) * 100)
      return number < 0 ? 0 : number > 100 ? 100 : number
    },
  },
}
</script>
<style lang="scss" scoped>
.collapse-item {
  padding-top: 40rpx;
}
.collapse-head {
  display: flex;
  .collapse-head-left {
    width: 50rpx;
    padding-top: 6rpx;
    position: relative;
    .icon {
      width: 30rpx;
      height: 30rpx;
      @include bg-color;
      border-radius: 30rpx;
      position: relative;
      z-index: 10;
    }
  }
  .collapse-head-center {
    .bag {
      margin-right: 10rpx;
    }
    .title {
      font-size: 30rpx;
      font-weight: 500;
      color: $edu-content-color;
      max-width: 460rpx;
    }
    .big-title {
      font-weight: 600;
      color: $edu-main-color;
    }
    .progress {
      margin-top: 16rpx;
      display: flex;
      align-items: center;
      .text {
        margin-left: 26rpx;
        font-size: 22rpx;
        color: $edu-content-color;
      }
      ::v-deep .u-progress {
        width: 150rpx;
      }
    }
  }
  .collapse-head-right {
    flex: 1;
    ::v-deep .edu-btn {
      height: 56rpx;
      min-width: 188rpx;
      line-height: 56rpx;
      padding: 0 20rpx;
      margin-right: 0;
    }
  }
}
.collapse-item {
  padding: 20rpx;
  border-radius: 9rpx;
  background: #FFF;
  margin: 20rpx 0;
}
</style>
